import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useResponsiveContext } from '../components/ResponsiveProvider';
import { wp, hp, sp, screenWidth, screenHeight, pixelRatio, getDesignBase, isTablet, isLandscape } from './layout';

/**
 * 设备信息组件
 * 用于开发调试时显示当前设备的尺寸、像素密度和方向等信息
 */
const DeviceInfo = () => {
  const { width, height } = useResponsiveContext();
  const designBase = getDesignBase();
  const [expanded, setExpanded] = React.useState(false);
  
  // 设备方向
  const orientation = isLandscape() ? 'LANDSCAPE' : 'PORTRAIT';
  // 设备类型
  const deviceType = isTablet() ? '平板' : '手机';

  if (!expanded) {
    return (
      <TouchableOpacity 
        style={styles.minimizedContainer}
        onPress={() => setExpanded(true)}
      >
        <Text style={styles.title}>设备信息</Text>
      </TouchableOpacity>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>设备信息</Text>
        <TouchableOpacity onPress={() => setExpanded(false)}>
          <Text style={styles.closeButton}>×</Text>
        </TouchableOpacity>
      </View>
      
      <Text style={styles.info}>宽度: {width.toFixed(0)}px</Text>
      <Text style={styles.info}>高度: {height.toFixed(0)}px</Text>
      <Text style={styles.info}>像素比: {pixelRatio.toFixed(2)}</Text>
      <Text style={styles.info}>方向: {orientation}</Text>
      <Text style={styles.info}>设备类型: {deviceType}</Text>
      
      <Text style={styles.title}>基准设计配置</Text>
      <Text style={styles.info}>设计宽度: {designBase.width}px</Text>
      <Text style={styles.info}>设计高度: {designBase.height}px</Text>
      <Text style={styles.info}>设计DPI: {designBase.dpi}</Text>
      
      <Text style={styles.title}>响应式示例</Text>
      <Text style={styles.info}>wp(100): {wp(100).toFixed(1)}px</Text>
      <Text style={styles.info}>hp(100): {hp(100).toFixed(1)}px</Text>
      <Text style={styles.info}>sp(16): {sp(16).toFixed(1)}px</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    position: 'absolute',
    right: 5,
    top: 50,
    padding: 6,
    borderRadius: 5,
    zIndex: 9999,
    width: 130,
  },
  minimizedContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    position: 'absolute',
    right: 5,
    top: 50,
    padding: 4,
    borderRadius: 4,
    zIndex: 9999,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 2,
  },
  closeButton: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 5,
  },
  title: {
    fontSize: 10,
    fontWeight: 'bold',
    color: '#FFF',
    marginBottom: 2,
    marginTop: 2,
  },
  info: {
    fontSize: 9,
    color: '#FFF',
    marginBottom: 1,
  },
});

export default DeviceInfo; 